<template>
  <el-row class="user-info-form" type="flex" justify="center">
    <el-col>
      <div class="asset-info-form">
        <el-form v-loading="loading" label-width="150px" :model="dicInfoForm" :rules="dicInfoFormRules" ref="dicInfoForm" @submit.native.prevent>
          <el-form-item label="字典名称：" prop='name'>
              <el-input
                v-model="dicInfoForm.name"
                clearable>
              </el-input>
          </el-form-item>
          <el-form-item label="字典类型：" prop='type'>
            <el-select filterable v-model="dicInfoForm.type" @change="selectType">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <template v-if="dicContentInput">
            <el-form-item class="dict-content" label="字典内容：" prop='dictValueObj'>
              <el-input type="textarea"
                v-model="dicInfoForm.dictValueObj"
                clearable>
              </el-input>
            </el-form-item>
          </template>
          <template v-if="keyInput">
              <el-form-item label="字典内容：">
                <el-button type="primary" plain @click="addKeyValue">+</el-button>
              </el-form-item>
              <template  v-for="(item, index) in dicInfoForm.dictValList">
                <div :key="index">
                  <el-row type="flex" justify="end" v-if="index!=0">
                    <el-button type="danger" icon="el-icon-delete" @click="removeKeyValue(index)" size="mini"></el-button>
                  </el-row>
                  <el-form-item label="---键：" :prop="'dictValList.'+ index + '.dictKey'" :rules="{ required: true, message: '请输入键', trigger: 'blur' }">
                    <el-input
                      v-model="item.dictKey"
                      clearable>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="---值：" :prop="'dictValList.'+ index + '.dictValue'" :rules="{ required: true, message: '请输入值', trigger: 'blur' }">
                    <el-input
                      v-model="item.dictValue"
                      clearable>
                    </el-input>
                  </el-form-item>
                </div>
              </template>
          </template>
          <el-form-item label-width="0" class="verifyidentity-button">
            <el-button @click.stop="closeFun(false)" round>取消</el-button>
            <el-button type="primary" @click="saveDicInfo('dicInfoForm')" round>保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>
<style>
  .dict-content .el-textarea .el-textarea__inner {
    min-height: 233px !important;
  }
</style>
<script>
import { updateDict } from '@/api/sysConfig'
export default {
    name: 'appVInfo',
    props: {
      dictInfo: {
        type: Object
      },
      closeFun: {
        type: Function,
        required: true
      },
    },
    data(){
      return {
        loading: false,
        keyInput: false,
        dicContentInput: true,
        typeList:[{"id":1,"name":"别名"},{"id":2,"name":"键值集合"},{"id":3,"name":"对象集合"}],
        // 表单数据
        dicInfoForm: {
          name: '',
          type: 1,
          dictValueObj: '',
          dictValList: [{
            dictKey: '',
            dictValue: ''
          }]
        },
        // 表单校验
        dicInfoFormRules: {
          name: [
            { required: true, message: '请输入字典名称', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择字典类型', trigger: 'change' }
          ],
          dictValueObj: [
            { required: true, message: '请输入字典内容', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      let that = this
      // 如果有历史值，设置回显
      if(that.dictInfo.id) {
        that.dicInfoForm.name = that.dictInfo.name
        that.dicInfoForm.dictValList = that.dictInfo.dictValueObj
        that.dicInfoForm.dictValueObj = that.dictInfo.alias
        that.dicInfoForm.type = that.dictInfo.type
        that.selectType(that.dictInfo.type)
      }
    },
    methods: {
      addKeyValue() {
        this.dicInfoForm.dictValList.push({
          dictValue: '',
          dictKey:  ''
        })
      },
      removeKeyValue(index) {
        if (index) {
          this.dicInfoForm.dictValList.splice(index, 1)
        }
      },
      // 保存
      saveDicInfo(formName) {
        // 阻止事件冒泡
        event.stopPropagation()
        let that = this
        let type = 1
        let parames = {}
        // 校验表单
        that.$refs[formName].validate((valid) => {
          if(valid) {
            var parames = {
              alias : that.dicInfoForm.dictValueObj,
              dictValue: JSON.stringify(that.dicInfoForm.dictValList),
              name: that.dicInfoForm.name,
              type: that.dicInfoForm.type,
              id: that.dictInfo.id
            }
            if(parames.id == null || parames.id == "") {
               parames.id = 0
            }
            // 调用保存接口
            updateDict(parames).then(res => {
              if(res.status === 200) {
                that.$message({
                  message: '保存成功！',
                  type: 'success'
                })
                // 关闭弹框
                that.closeFun(true)
              } else {
                that.$message({
                  message: res.info,
                  type: 'warning'
                })
              }
            })
          } else {
              return false
          }
        })
      },
      selectType(selVal){
        if(selVal==1){
          this.keyInput = false
          this.dicContentInput = true
          this.dicInfoForm.dictValList = [{
            dictKey: '',
            dictValue: ''
          }]
          this.dicInfoForm.dictValueObj = this.dictInfo.alias
        }else {
          this.keyInput = true
          this.dicContentInput = false
          if(this.dictInfo.dictValueObj==null){
            this.dicInfoForm.dictValList = [{dictKey: '', dictValue: ''}]
          }else{
            this.dicInfoForm.dictValList = this.dictInfo.dictValueObj
          }
          this.dicInfoForm.dictValueObj = ""
        }
      },
    }
  }
</script>
